<template>
  <d2-container class="page">
    <template slot="header">统计</template>
    <div class="statistical">
      <div :style="{background:bgcolor[index]}" class="son" v-for="(item,index) in statisticallist" :key="index">
        <p class="sonprice">￥{{item.price}}　　<b style="font-size:18px"
                                              v-if="Number(item.difference)<0">⬇{{item.difference}}</b>
          　　<b style="font-size:18px"
             v-if="Number(item.difference)>0">⬆{{item.difference}}</b>
        </p>
        <p class="sonname">{{item.name}}</p>
      </div>
    </div>
    <div class="statisnum statistical">
      <el-card class="elcard" shadow="hover" v-for="(item,index) in statisticallist" :key="index">
        <p class="titlestyle">
          <span>刷单数量</span>
          <span class="iconstyle" :style="{background:bgcolor[index]}">{{iconlist[index]}}</span>
        </p>
        <div class="center">
          <p class="price">{{item.num}}　　<b style="font-size:18px"
                                            v-if="Number(item.difference_num)<0">⬇{{item.difference_num}}</b>
            　　<b style="font-size:18px"
                 v-if="Number(item.difference_num)>0">⬆{{item.difference_num}}</b></p>
          <p>{{iconlist[index]}}单数</p>
        </div>
      </el-card>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="margin-left:10px;">
      <el-form-item label="选择商户">
        <el-select size="small" v-model="shopVal" placeholder="请选择">
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择时间">
        <el-date-picker size="small" v-model="timelist" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="statistical" style="margin-bottom:20px;">
      <div style="overflow:hidden;" :style="{background:anothbgcolor[index]}" class="son"
           v-for="(item,index) in anothtype" :key="index">
        <div style="float:left;">
          <p class="sonprice">
            <img style="width:40px;" :src="item.path" alt="">
          </p>
          <p class="sonname">{{item.name}}</p>
        </div>
        <p style="float:right;font-size:20px;">￥{{item.price}}</p>
      </div>
    </div>
    <!-- <div class="showcircle">
      <div class="circle">
        <p class="first">{{titletext}}</p>
        <p class="second">{{total}} 元</p>
      </div>
      <ve-pie :data="chartData" :settings="chartSettings" style="width:50%;float:right;margin-top:15px;"></ve-pie>
    </div> -->
    <div style="margin-left:10px;">
      <h4>支付宝</h4>
      <el-table :data="zfbData" height="250" border style="width: 100%">
        <el-table-column prop="user" label="商户" width="280"></el-table-column>
        <el-table-column prop="transaction" label="订单号"></el-table-column>
        <el-table-column prop="payment_amount" label="充值金额" width="280"></el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="pagezfb"
                     :page-size="10" layout="total, prev, pager, next" :total="totalzfb" v-if="totalzfb>=10">
      </el-pagination>
      <h4>银行卡</h4>
      <el-table :data="yhkData" height="250" border style="width: 100%">
        <el-table-column prop="user" label="商户" width="280"></el-table-column>
        <el-table-column prop="bankcard_number" label="订单号"></el-table-column>
        <el-table-column prop="bankcard_money" label="充值金额" width="260"></el-table-column>
        <el-table-column prop="addpeople" label="审核人" width="200"></el-table-column>
      </el-table>
      <el-pagination @current-change="handlepageChange" :current-page.sync="pageyhk"
                     :page-size="10" layout="total, prev, pager, next" :total="totalyhk" v-if="totalyhk>=10">
      </el-pagination>
    </div>
  </d2-container>
</template>

<script>
  import {ctconsumption, bancktopup, alitopup, alitopuplist, bancktopuplist, income, ordernum} from '@api/sys.login';

  export default {
    data() {
      // this.chartSettings = {
      //   roseType: 'radius'
      // }
      return {
        statisticallist: [
          {price: '0.00', name: '总收入', num: 0, difference: "",difference_num: "",},
          {price: '0.00', name: '月收入', num: 0, difference: "",difference_num: "",},
          {price: '0.00', name: '日收入', num: 0, difference: "",difference_num: "",}
        ],
        bgcolor: ['#e4cc60', '#0494ae', '#f88109', '#f83215'],
        anothbgcolor: ['#23c6c8', '#f8ac59'],
        anothtype: [
          {price: '0.00', name: '支付宝', path: require('../../../assets/img/zfb.png')},
          {price: '0.00', name: '银行卡', path: require('../../../assets/img/yhk.png')}
        ],
        iconlist: ['总', '年', '月', '日'],
        // chartData: {
        //   columns: ['日期', '访问用户'],
        //   rows: [
        //     { '日期': '1/5', '访问用户': 2923 },
        //     { '日期': '1/6', '访问用户': 4593 }
        //   ]
        // },
        zfbData: [],
        yhkData: [],
        formInline: {
          user: '',
          region: ''
        },
        options: [],
        shopVal: '',
        timelist: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        // titletext:'今日商户充值总额',
        // total:20000,
        pagezfb: 1,
        totalzfb: 0,
        pageyhk: 1,
        totalyhk: 0,
      }
    },
    created() {

    },
    mounted() {
      this.getshoplist()
      this.getyhk()
      this.getzfb()
      let params = {
        page: 1,
        pageSize: 10
      }
      this.getzfblist(params)
      this.getyhklist(params)
      this.getallmoney()
      this.getallnum()
    },
    methods: {
      //获取商户列表
      getshoplist() {
        ctconsumption().then(res => {
          console.log('商户列表', res)
          if (res.status == 200) {
            this.options = []
            let tempdata = res.data
            for (let item in tempdata) {
              this.options.push({
                value: tempdata[item].id,
                label: tempdata[item].user
              })
            }
            console.log('this.options', this.options)
          }
        })
      },
      //获取年月日收入
      getallmoney() {
        let arr = ['Count', 'Month', 'Day']
        arr.forEach((item, idx) => {
          income({type: item}).then(res => {
            if (res.status == 200) {
              this.statisticallist[idx].price = res.lr_num
              this.statisticallist[idx].difference = res.difference
            }
          })
        })
      },
      //获取年月日数量
      getallnum() {
        let arr = ['Count', 'Month', 'Day']
        arr.forEach((item, idx) => {
          ordernum({type: item}).then(res => {
            if (res.status == 200) {
              this.statisticallist[idx].num = res.count
              this.statisticallist[idx].difference_num = res.difference
            }
          })
        })
        console.log(this.statisticallist);
      },
      //获取银行卡总金额
      getyhk(params) {
        bancktopup(params).then(res => {
          console.log('银行卡', res)
          this.anothtype[1].price = res.date
        })
      },
      //获取支付宝总金额
      getzfb(params) {
        alitopup(params).then(res => {
          this.anothtype[0].price = res.date
        })
      },
      //获取支付宝列表
      getzfblist(params) {
        alitopuplist(params).then(res => {
          if (res.status == 200) {
            this.totalzfb = res.count
            this.zfbData = res.list
            // console.log('银行卡列表',this.zfbData)
          }
        })
      },
      //获取银行卡列表
      getyhklist(params) {
        bancktopuplist(params).then(res => {
          if (res.status == 200) {
            this.totalyhk = res.count
            this.yhkData = res.list
            // console.log('银行卡列表',this.yhkData)
          }
        })
      },
      //支付宝分页
      handleCurrentChange(val) {
        this.pagezfb = val
        let item = {
          page: val,
          pageSize: 10,
          date: this.timelist,
          cooperation_id: this.shopVal
        }
        this.getzfblist(item)
      },
      //银行卡分页
      handlepageChange(val) {
        this.pageyhk = val
        let item = {
          page: val,
          pageSize: 10,
          date: this.timelist,
          cooperation_id: this.shopVal
        }
        this.getyhklist(item)
      },
      //查询
      onSubmit() {
        if (this.timelist.length > 0) {
          this.timelist[0] = this.timelist[0] + ' 00:00:00'
          this.timelist[1] = this.timelist[1] + ' 23:59:59'
        }
        let params = {
          date: this.timelist,
          cooperation_id: this.shopVal
        }
        this.getyhk(params)
        this.getzfb(params)
        let item = {
          page: 1,
          pageSize: 10,
          date: this.timelist,
          cooperation_id: this.shopVal
        }
        this.getzfblist(item)
        this.getyhklist(item)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    h4 {
      font-weight: 100;
    }
    .circle {
      width: 260px;
      height: 260px;
      border-radius: 50%;
      margin: 20px auto;
      background: linear-gradient(to right, #01ccfb, #337eec);
      color: #fff;
      text-align: center;
      font-size: 20px;
    }

    .first {
      padding-top: 80px;
      margin-bottom: 0;
    }

    .second {
      margin-top: 10px;
      font-size: 30px;
    }

    .statistical {
      display: flex;
      justify-content: space-around;

      .son {
        margin: 10px;
        width: 100%;
        padding: 10px 20px;
        border-radius: 6px;
        color: #fff;

        .sonprice {
          font-size: 20px;
          margin: 10px 0;
        }

        .sonname {
          margin-top: 0;
        }
      }
    }

    .statisnum {
      margin-bottom: 20px;

      .elcard {
        font-size: 14px;
        width: 100%;
        margin: 10px;

        .titlestyle {
          margin: 0;
          display: flex;
          justify-content: space-between;

          .iconstyle {
            display: inline-block;
            padding: 2px 10px;
            font-weight: 600;
            color: #fff;
            border-radius: 3px;
          }
        }

        .center {
          p {
            margin: 0;
          }

          .price {
            font-size: 30px;
            margin: 15px 0 5px;
          }
        }
      }
    }
  }
</style>
